<!--
 * @Author: gao_m3
 * @Date: 2021-09-10 14:49:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-02 15:53:18
 * @Descripttion: 
-->
<template>
  <div class="micro-front-desc-container">
    <div style=" position: relative;width: 600px;">
      <fks-form
        label-position="left"
        label-width="130px"
        style="padding-bottom: 48px;"
        :model="formLabelAlign"
      >
        <fks-form-item :label="LANG.APPLYNAME">
          <fks-input v-model="formLabelAlign.name" />
        </fks-form-item>
        <fks-form-item :label="LANG.RUN_ADDRESS">
          <fks-input v-model="formLabelAlign.entry" />
        </fks-form-item>
      </fks-form>

      <fks-button
        style="position: absolute; bottom: 0; right: 0;"
        primary
        @click="register"
      >
        {{ LANG.REGISTER_SUB_APPLY }}
      </fks-button>
    </div>

    <div class="micro-front-app-list">
      <fks-query-page
        v-loading="tableLoading"
        :data="tableData"
        :page="false"
        :element-loading-text="LANG.LOADING"
        :table-name="LANG.SUB_APPLY_LIST"
      >
        <template>
          <fks-table-column
            type="index"
            align="center"
            label="#"
          >
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </fks-table-column>
          <fks-table-column
            prop="name"
            align="left"
            :label="LANG.APPLYNAME"
          >
            <template slot-scope="scope">
              {{
                delPrefix(scope.row.name)
              }}
            </template>
          </fks-table-column>
          <fks-table-column
            prop="name"
            align="left"
            :label="LANG.ACTUAL_NAME"
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </fks-table-column>
          <fks-table-column
            prop="entry"
            align="left"
            :label="LANG.RUN_ADDRESS"
          />
          <fks-table-column
            align="left"
            prop="activeRoute"
            :label="LANG.ACTIVE_ROUTE"
          />
        </template>
      </fks-query-page>
    </div>
  </div>
</template>


<script>
// import Mix from '@/mixins/module'
import { registerExtraApp, getAppList } from '@/subapp/qiankun'
import { appPathPrefix } from '@/config'
export default {
  name: 'MFE',
  // mixins: [Mix],
  data() {
    return {
      tableLoading: true,
      formLabelAlign: {},
      tableData: [] //table展示用数据
    }
  },
  mounted() {
    setTimeout(() => {
      this.tableData = getAppList()
      this.tableLoading = false
    }, 2000)
  },
  methods: {
    delPrefix(name) {
      return name.replace(appPathPrefix, '')
    },
    register() {
      let app = { ...this.formLabelAlign }

      if (registerExtraApp(app)) {
        this.$message({
          type: 'success',
          message: this.LANG.REGISTER_SUCCESS
        })
        this.tableData = getAppList()
      } else {
        this.$message({
          type: 'error',
          message: this.LANG.REGISTER_ERROR
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.micro-front-desc-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px 32px;
  overflow-y: auto;
  background-color: white !important;
}

.micro-front-app-list {
  height: 700px;

  ::v-deep .fks-query-page {
    padding: 0;
  }
}
</style>
